<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<button id="send">我寄的</button>
<button id="receive">我收的</button>
<button id="selectSend">查询寄的</button>
<button id="selectReceive">查询收的</button>
<input type="text" id="searchInputSend" placeholder="查寄的">
<input type="text" id="searchInputReceive" placeholder="查收的">
<div class="container">
<table id="pageTable" class="table table-bordered">
    <th>
    <td>快递编号</td>
    <td>寄件人</td>
    <td>收件人</td>
    <td>状态</td>
    <td>操作</td>
    </th>
</table>
    <nav style="text-align: right">
        <ul class="pagination" style="margin: 0 auto;">
        </ul>
    </nav>
</div>
<!--订单详情 模态框-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="el-dialog__body">
                    <div class="info-box">
                        <div class="bar" style="text-align: center">
                            <p id="pageNum"></p>
                            <p id="status"></p>
                        </div>
                        <table cellpadding="0" cellspacing="1" class="table table-bordered">
                            <tr>
                                <td>寄件</td>
                                <td><h3 id="sNameAndPhone"></h3>
                                    <p id="sAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>收件</td>
                                <td><h3 id="rNameAndPhone"></h3>
                                    <p id="rAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>其他</td>
                                <td><p><i>下单时间：</i> <em id="createTime"></em></p></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="deleteOrder" data-target="#myModal2"
                        data-toggle="modal" style="">删除订单
                </button>
                <button type="button" class="btn btn-primary" id="sendAgain">再寄一单</button>
            </div>
        </div>
    </div>
</div>

<!--删除/取消订单 模态框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title">提示</h2>
            </div>
            <div class="modal-body">
                <img src="/sdkd/user/img/exclamationMark.svg" alt="" style="float: left"><h4 id="text"></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                <button type="button" class="btn btn-primary" id="ensure">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    /**
     * 丛志文
     */

    // var currPage = 1
    // // 每页默认5条数据
    // var pageSize = 5
    // // 获取传递的参数  /showhero.html?currPage=2--?currPage=2
    // var search = location.search
    // // 按照=对参数分割
    // var arr = search.split("=")
    // // 第一次访问页面时，是没有传递参数的，只有在分页时才会传递参数
    // // 防止第一次出现问题
    // if(arr.length >1){
    //     currPage = arr[1]
    // }
    //
    // $.ajax({
    //     url:"/sdkd/userPageInfo/selectSendUserPageInfo.do",
    //     data:"currPage=" + currPage + "&pageSize=" + pageSize,
    //     async:false,
    //     dataType:"json",
    //     type:"get",
    //     success:function (data){
    //         let html = ''
    //         console.log(data)
    //         var list = data.data
    //         if(null == list){
    //             console.log("没有数据")
    //             return
    //         }
    //         for (let i = 0; i < list.length; i++) {
    //             let status = list[i].status
    //             if ("已删除" == status) {
    //                 continue
    //             }
    //             pageNum = list[i].pageNum
    //             html += `<tr class="list"><td>${i + 1}</td>
    //             <td>${list[i].pageNum}</td>
    //             <td>${list[i].sendName}</td>
    //             <td>${list[i].receiveName}</td>
    //             <td class="status" id=${status}>${list[i].status}</td>
    //             <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
    //         }
    //         $("#pageTable").append(html)
    //     }
    // })
    //
    // // 当前页
    // function generatePage(navigatepageNums, pageNum, pages){
    //     var html = ''
    //     console.log(pageNum)
    //     if(pageNum == 1){
    //         html += `<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
    //     } else {
    //         html += `<li><a href="/sdkd/userPageInfo/selectSendUserPageInfo.do?currPage=${pageNum-1}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
    //     }
    //     // console.log(navigatePages)
    //     // 生成页码
    //     for(let i = 0; i < navigatepageNums.length; i++){
    //         if(pageNum == navigatepageNums[i]){
    //             // 当前页class=active，设置选中效果
    //             html += `<li class="active"><a href="#">${navigatepageNums[i]}</a></li>`
    //         } else {
    //             // showhero.html?
    //             // 不是当前页
    //             html += `<li><a href="/sdkd/userPageInfo/selectSendUserPageInfo.do?currPage=${navigatepageNums[i]}">${navigatepageNums[i]}</a></li>`
    //         }
    //
    //     }
    //     if(pageNum == pages) {
    //         html += `<li class="disabled"><a href="#" aria-label="Next">
    //                 <span aria-hidden="true">&raquo;</span>
    //             </a></li>`
    //     } else {
    //         html += `<li><a href="/sdkd/userPageInfo/selectSendUserPageInfo.do?currPage=${pageNum+1}" aria-label="Next">
    //                 <span aria-hidden="true">&raquo;</span>
    //             </a></li>`
    //     }
    //     $("ul").append(html)
    // }


    $("#send").click(function () {
        $(".list").remove()
        $.ajax({
            url: "/sdkd/userPageInfo/selectSendUserPageInfo.do",
            async: false,
            dataType: "json",
            type: "post",
            success: function (data) {
                let list = data.data
                if (null == list) {
                    console.log("没有数据")
                    return
                }
                let html = ''
                console.log(data)
                for (let i = 0; i < list.length; i++) {
                    let status = list[i].status
                    pageNum = list[i].pageNum
                    html += `<tr class="list"><td>${i + 1}</td>
                  <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                }
                $("#pageTable").append(html)
            }
        })
    })

    $("#receive").click(function () {
        $(".list").remove()
        $.ajax({
            url: "/sdkd/userPageInfo/selectReceiveUserPageInfo.do",
            async: false,
            dataType: "json",
            type: "post",
            success: function (data) {
                console.log(data)
                let list = data.data
                if (null == list) {
                    console.log("没有数据")
                    return
                } else {
                    let html = ''
                    for (let i = 0; i < list.length; i++) {
                        let status = list[i].status
                        pageNum = list[i].pageNum
                        html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="receiveDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                    }
                    $("#pageTable").append(html)
                }
            }
        })
    })


    $.ajax({
        url: "/sdkd/userPageInfo/selectSendUserPageInfo.do",
        async: false,
        dataType: "json",
        type: "post",
        success: function (data) {
            let html = ''
            console.log(data)
            var list = data.data
            if(null == list){
                console.log("没有数据")
                return
            }
            for (let i = 0; i < list.length; i++) {
                let status = list[i].status
                pageNum = list[i].pageNum
                html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
            }
            $("#pageTable").append(html)
        }
    })

    // 快递详情
    $("body").on("click", ".sendDetail", function () {
        let pageNum = $(this).attr("id")
        console.log(pageNum)
        $.post("/sdkd/userPageInfo/userDetailPageInfo.do", "pageNum=" + pageNum, function (data) {
            console.log(data)
            if ("已下单" == data.data.status) {
                //根据status 变换模态框的第一个按钮的显示，以及点击后的显示
                $("#deleteOrder").text("取消订单")
                $("#deleteOrder").attr("id", "cancelOrder")
                $("#deleteOrder").attr("style", "")
                $("#cancelOrder").text("取消订单")
                $("#cancelOrder").attr("id", "cancelOrder")
                $("#cancelOrder").attr("style", "")
                $("#text").text("此操作将取消该订单, 是否继续?")
                //根据status 变换“确定”按钮的id，进而确定功能
                $("#ensure").attr("id", "cancelEnsure")
                $("#deleteEnsure").attr("id", "cancelEnsure")
            } else if ("已取消" == data.data.status) {
                $("#deleteOrder").text("删除订单")
                $("#deleteOrder").attr("id", "deleteOrder")
                $("#deleteOrder").attr("style", "")
                $("#cancelOrder").text("删除订单")
                $("#cancelOrder").attr("id", "deleteOrder")
                $("#cancelOrder").attr("style", "")
                $("#text").text("此操作将永久删除该订单, 是否继续?")
                $("#ensure").attr("id", "deleteEnsure")
                $("#cancelEnsure").attr("id", "deleteEnsure")
            } else if ("运输中" == data.data.status) {
                $("#deleteOrder").attr("style", "display:none")
                $("#cancelOrder").attr("style", "display:none")
            } else if ("待取件" == data.data.status) {
                $("#deleteOrder").attr("style", "display:none")
                $("#cancelOrder").attr("style", "display:none")
            } else if ("已签收" == data.data.status) {
                $("#deleteOrder").attr("style", "display:none")
                $("#cancelOrder").attr("style", "display:none")
            }
            $("#pageNum").text("快递编号: " + data.data.pageNum)
            $("#status").text("最新状态: " + data.data.status)
            $("#sNameAndPhone").text(data.data.sendName + " " + data.data.sendPhone)
            $("#sAddressAndDetailAddress").text(data.data.sendProvince + data.data.sendCity + data.data.sendArea + " " + data.data.sendDetail)
            $("#rNameAndPhone").text(data.data.receiveName + " " + data.data.receivePhone)
            $("#rAddressAndDetailAddress").text(data.data.receiveProvince + data.data.receiveCity + data.data.receiveArea + " " + data.data.receiveDetail)
            $("#createTime").text(data.data.createTime)
        }, "json")

        //点击删除订单记录后并且点击确定
        $("body").on("click","#deleteEnsure",function () {
            $("#myModal2").modal("hide")
            $("#myModal1").modal("hide")
            $.post("/sdkd/userPageInfo/deleteCancelPage.do", "pageNum=" + pageNum, function (data) {
                $(".list").remove()
                $.ajax({
                    url: "/sdkd/userPageInfo/selectSendUserPageInfo.do",
                    async: false,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        let list = data.data
                        if (null == list) {
                            console.log("没有数据")
                            return
                        }
                        let html = ''
                        console.log(data)
                        for (let i = 0; i < list.length; i++) {
                            let status = list[i].status
                            pageNum = list[i].pageNum
                            html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                        }
                        $("#pageTable").append(html)
                    }
                })
            })
        })

        //点击取消订单记录后并且点击确定
        $(document).on("click","#cancelEnsure",function () {
            $("#myModal2").modal("hide")
            $("#myModal1").modal("hide")
            console.log("**************")
            $.post("/sdkd/userPageInfo/cancelOrderPage.do", "pageNum=" + pageNum, function (data) {
                console.log(data)
                $(".list").remove()
                $.ajax({
                    url: "/sdkd/userPageInfo/selectSendUserPageInfo.do",
                    async: false,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        let list = data.data
                        if (null == list) {
                            console.log("没有数据")
                            return
                        }
                        let html = ''
                        console.log(data)
                        for (let i = 0; i < list.length; i++) {
                            let status = list[i].status
                            pageNum = list[i].pageNum
                            html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                        }
                        $("#pageTable").append(html)
                    }
                })
            }, "json")
        })
        //点击再寄一单
        $("#sendAgain").click(function () {
            $.post("/sdkd/userPageInfo/userDetailPageInfo.do", "pageNum=" + pageNum, function (data) {
                //将数据传给预约寄件
                window.location.href = "booking_delivery.html?data=" + data.data
            }, "json")
        })
    })

    //我收的 收到快递的详情
    $("body").on("click", ".receiveDetail", function () {
        let pageNum = $(this).attr("id")
        console.log(pageNum)
        $.post("/sdkd/userPageInfo/userDetailPageInfo.do", "pageNum=" + pageNum, function (data) {
            console.log(data)
            //不能进行操作
            $("#deleteOrder").attr("style", "display:none")
            $("#cancelOrder").attr("style", "display:none")
            $("#sendAgain").attr("style", "display:none")

            $("#pageNum").text("快递编号: " + data.data.pageNum)
            $("#status").text("最新状态: " + data.data.status)
            $("#sNameAndPhone").text(data.data.sendName + " " + data.data.sendPhone)
            $("#sAddressAndDetailAddress").text(data.data.sendProvince + data.data.sendCity + data.data.sendArea + " " + data.data.sendDetail)
            $("#rNameAndPhone").text(data.data.receiveName + " " + data.data.receivePhone)
            $("#rAddressAndDetailAddress").text(data.data.receiveProvince + data.data.receiveCity + data.data.receiveArea + " " + data.data.receiveDetail)
            $("#createTime").text(data.data.createTime)
        }, "json")
    })

    //根据输入框内容 查询我寄的
    $("#selectSend").click(function () {
        let searchValue = $("#searchInputSend").val().trim()
        console.log(searchValue)
        $.post("/sdkd/userPageInfo/selectSendUserPageInfo.do", "searchValue=" + searchValue, function (data) {
            $(".list").remove()
            let list = data.data
            console.log(data)
            if (null == list) {
                console.log("没有数据")
                return
            }
            let html = ''
            for (let i = 0; i < list.length; i++) {
                let status = list[i].status
                pageNum = list[i].pageNum
                html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
            }
            $("#pageTable").append(html)
        },"json")
    })

    //根据输入框内容 查询我收的
    $("#selectReceive").click(function () {
        let searchValue = $("#searchInputReceive").val()
        $.post("/sdkd/userPageInfo/selectReceiveUserPageInfo.do", "searchValue=" + searchValue, function (data) {
            $(".list").remove()
            let list = data.data
            if (null == list) {
                console.log("没有数据")
                return
            }
            let html = ''
            console.log(data)
            for (let i = 0; i < list.length; i++) {
                let status = list[i].status
                pageNum = list[i].pageNum
                html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
            }
            $("#pageTable").append(html)
        }, "json")
    })
</script>
</body>
</html>